<template>
    <view>
        <!-- 顶部标题 -->
        <view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
            <view class="cu-bar fixed gold-bg" :style="[{height:CustomBar + 'px',paddingTop:StatusBar + 'px'}]">
                <view class="content text-bold">确认订单</view>
            </view>
        </view>
        
        <!-- 配送方式 -->
        <view class="bg-white padding-tb solid-bottom">
            <view class="flex">
                <view class="flex-sub padding-left-sm" :class="deliveryMethod === 'pickup' ? 'text-orange' : ''" @tap="switchDelivery('pickup')">
                    <view class="flex justify-center align-center">
                        <text>到店自提</text>
                        <view class="cu-tag line-orange sm round margin-left-xs" v-if="deliveryMethod === 'pickup'"></view>
                    </view>
                </view>
                <view class="flex-sub padding-right-sm" :class="deliveryMethod === 'delivery' ? 'text-orange' : ''" @tap="switchDelivery('delivery')">
                    <view class="flex justify-center align-center">
                        <text>快递配送</text>
                        <view class="cu-tag line-orange sm round margin-left-xs" v-if="deliveryMethod === 'delivery'"></view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 自提信息 -->
        <view class="bg-white padding" v-if="deliveryMethod === 'pickup'">
            <view class="padding-lr">
                <picker @change="storeChange" :value="storeIndex" :range="stores" range-key="name">
                    <view class="picker padding-tb flex justify-between align-center solid-bottom">
                        <text>{{stores[storeIndex].name}}</text>
                        <text class="cuIcon-right text-gray"></text>
                    </view>
                </picker>
                
                <view class="padding-tb flex justify-between align-center">
                    <view>自取时间</view>
                    <view>{{pickupDate}}</view>
                </view>
                
                <view class="padding-tb flex justify-between align-center">
                    <view>预留电话</view>
                    <view>{{reservePhone}}</view>
                </view>
            </view>
        </view>
        
        <!-- 收货地址 -->
        <view class="bg-white padding" v-if="deliveryMethod === 'delivery'">
            <view class="flex justify-between align-center">
                <view>
                    <view class="flex align-center">
                        <text class="margin-right-sm">收件人</text>
                        <input class="flex-sub" placeholder="请填写收件人姓名" v-model="receiver" />
                    </view>
                </view>
            </view>
            
            <view class="margin-top">
                <view class="flex align-center">
                    <text class="margin-right-sm">手机号</text>
                    <input class="flex-sub" placeholder="请填写收件人手机号" v-model="phone" type="number" />
                </view>
            </view>
            
            <view class="margin-top">
                <view class="flex align-center">
                    <text class="margin-right-sm">详细地址</text>
                    <input class="flex-sub" placeholder="请填写详细地址与门牌号" v-model="address" />
                </view>
            </view>
        </view>
        
        <!-- 商品信息 -->
        <view class="bg-white margin-top padding">
            <view class="flex">
                <image class="product-image" src="/static/product1.jpg" mode="aspectFill"></image>
                <view class="flex-sub padding-left">
                    <view class="text-lg">黑晶系列（礼盒装）</view>
                    <view class="text-gray text-sm">x1</view>
                    <view class="text-price text-red text-xl">5588</view>
                </view>
                <view class="padding-right flex align-end">
                    <view class="text-gray">店铺活动/券 ></view>
                </view>
            </view>
        </view>
        
        <!-- 订单金额 -->
        <view class="bg-white margin-top padding">
            <view class="flex justify-between">
                <view class="text-gray">小计</view>
                <view class="text-price text-red">5588</view>
            </view>
        </view>
        
        <!-- 发票信息 -->
        <view class="bg-white margin-top padding">
            <view class="flex justify-between" @tap="showInvoice = !showInvoice">
                <view>开具发票</view>
                <view class="text-gray flex align-center">
                    <text>{{invoiceTitle || '不开发票'}}</text>
                    <text class="cuIcon-right margin-left-xs"></text>
                </view>
            </view>
        </view>
        
        <!-- 订单备注 -->
        <view class="bg-white margin-top padding">
            <view class="flex">
                <view>订单备注</view>
                <input class="flex-sub padding-left" placeholder="请填写备注信息" v-model="remark" />
            </view>
        </view>
        
        <!-- 底部提交 -->
        <view class="cu-bar bg-white tabbar border foot">
            <view class="flex-sub flex justify-end align-center padding-right">
                <text class="text-sm text-gray">小计：</text>
                <text class="text-price text-red text-xl">5588</text>
            </view>
            <view class="bg-gold submit" @tap="submitOrder">提交订单</view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            StatusBar: this.$statusBarHeight,
            CustomBar: this.$CustomBar,
            deliveryMethod: 'delivery', // pickup: 自提, delivery: 配送
            stores: [
                { id: 1, name: '金属世界店' }
            ],
            storeIndex: 0,
            pickupDate: '02-17',
            reservePhone: '13888888888',
            
            // 收货地址
            receiver: '',
            phone: '',
            address: '',
            
            // 发票
            showInvoice: false,
            invoiceTitle: '',
            
            // 备注
            remark: ''
        };
    },
    methods: {
        switchDelivery(method) {
            this.deliveryMethod = method;
        },
        storeChange(e) {
            this.storeIndex = e.detail.value;
        },
        submitOrder() {
            if (this.deliveryMethod === 'delivery') {
                if (!this.receiver || !this.phone || !this.address) {
                    uni.showToast({
                        title: '请填写完整的收货信息',
                        icon: 'none'
                    });
                    return;
                }
            }
            
            uni.showToast({
                title: '提交成功',
                icon: 'success'
            });
            
            // 跳转到支付页面或订单列表
            setTimeout(() => {
                uni.redirectTo({
                    url: '/pages/order/list'
                });
            }, 1500);
        }
    }
};
</script>

<style>
.product-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8rpx;
}

.submit {
    width: 240rpx;
    height: 100%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style> 